<template>
  <!-- 加班设置 -->
  <el-form ref="extraDutyForm" :model="extraDutyForm" label-width="120px">
    <!-- 选择部门 -->
    <el-form-item label="请选择部门：" prop="departmentId" :rules="extraDutyRules.departmentId">
      <el-cascader
        v-model="extraDutyForm.departmentId"
        :options="departmentList"
        :props="{ expandTrigger: 'hover', label: 'name', value: 'id', emitPath: false }"
        separator="-"
        @change="onChangeDepartment"
        @blur.native.capture="$refs.extraDutyForm.validateField('departmentId')"
      />
    </el-form-item>
    <!-- 加班规则 -->
    <el-form-item v-if="extraDutyForm.configData.extraDutyRuleList !== undefined" label="加班规则：">
      <el-row v-for="item in extraDutyForm.configData.extraDutyRuleList" :key="item.id" type="flex" justify="space-between" align="middle" style="margin-bottom: 10px;">
        <el-col :span="8">
          <el-switch
            v-model="item.isEnable"
            :active-value="1"
            :inactive-value="0"
          />
          &nbsp;&nbsp;{{ item.rule }}
        </el-col>
        <el-col :span="16" style="text-align: right;">
          <el-checkbox v-model="item.isTimeOff" true-label="1" false-label="0">调休假</el-checkbox>&nbsp;&nbsp;
          <el-time-picker
            v-model="item.ruleStartTime"
            value-format="HH:mm:ss"
            :picker-options="{
              selectableRange: '00:00:00 - 23:59:59',
              format: 'HH:mm:ss'
            }"
            :clearable="false"
            size="medium"
            style="width: 120px;"
            placeholder="任意时间点"
          /> -
          <el-time-picker
            v-model="item.ruleEndTime"
            value-format="HH:mm:ss"
            :picker-options="{
              selectableRange: '00:00:00 - 23:59:59',
              format: 'HH:mm:ss'
            }"
            :clearable="false"
            size="medium"
            style="width: 120px;"
            placeholder="任意时间点"
          />
        </el-col>
      </el-row>
    </el-form-item>
    <!-- 是否打卡验证 -->
    <el-form-item v-if="extraDutyForm.configData.extraDutyConfig !== undefined" label="是否打卡验证：">
      <div class="align-center">
        <el-switch
          v-model="extraDutyForm.configData.extraDutyConfig.isClock"
          :active-value="1"
          :inactive-value="0"
        />
        &nbsp;加班是否需要有打卡记录
      </div>
    </el-form-item>
    <!-- 是否开启补偿 -->
    <el-form-item v-if="extraDutyForm.configData.extraDutyConfig !== undefined" label="是否开启补偿：">
      <el-switch
        v-model="extraDutyForm.configData.extraDutyConfig.isCompensationint"
        :active-value="1"
        :inactive-value="0"
      />
    </el-form-item>
    <!-- 调休假设置 -->
    <el-form-item v-if="extraDutyForm.configData.dayOffConfigs !== undefined" label="调休假设置：">
      <!-- 最晚有效期 -->
      <el-form-item>
        最晚有效期：次年
        <el-date-picker
          v-model="extraDutyForm.configData.dayOffConfigs.latestEffectDate"
          type="date"
          placeholder="选择日期"
          value-format="MM-dd"
          format="MM-dd"
          style="width: 150px; margin-bottom: 20px;"
          :clearable="false"
        />
      </el-form-item>
      <!-- 请假最小单位 -->
      <el-form-item prop="configData.dayOffConfigs.unit" :rules="extraDutyRules.unit">
        请假最小单位
        <el-input v-model="extraDutyForm.configData.dayOffConfigs.unit" style="width:60px" size="medium" />
        天
      </el-form-item>
    </el-form-item>
  </el-form>
</template>

<script>
import { getDepartmentListAPI } from '@/api/department'
import { transListToTreeData } from '@/utils'
import { getExtraDutySettingAPI, updateExtraDutySettingAPI } from '@/api/attendance'

const defaultForm = {
  departmentId: 2, // 部门id
  configData: {} // 加班设置数据
}

export default {
  name: 'LeaveConfig',
  data() {
    return {
      departmentList: [], // 部门列表
      // 加班设置表单
      extraDutyForm: { ...defaultForm },
      // 加班设置表单校验规则
      extraDutyRules: {
        departmentId: [
          { required: true, message: '请选择部门', trigger: ['blur', 'change'] }
        ],
        unit: [
          { required: true, message: '请选择单位', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    // 获取部门列表
    await this.getDepartmentList()
    await this.onChangeDepartment()
  },
  methods: {
    // 获取部门列表
    async getDepartmentList() {
      const list = await getDepartmentListAPI()
      this.departmentList = transListToTreeData(list, 0)
    },
    // 修改了选中的部门
    async onChangeDepartment() {
      this.extraDutyForm.configData = await getExtraDutySettingAPI(this.extraDutyForm.departmentId)
      console.log(this.extraDutyForm.configData)
    },
    // 保存加班设置
    async saveExtraDutySetting() {
      // 校验表单
      this.$refs.extraDutyForm.validate(async valid => {
        if (!valid) return
        await updateExtraDutySettingAPI({
          departmentId: this.extraDutyForm.departmentId,
          isClock: this.extraDutyForm.configData.extraDutyConfig.isClock,
          isCompensationint: this.extraDutyForm.configData.extraDutyConfig.isCompensationint,
          latestEffectDate: this.extraDutyForm.configData.dayOffConfigs.latestEffectDate,
          unit: this.extraDutyForm.configData.dayOffConfigs.unit,
          rules: this.extraDutyForm.configData.extraDutyRuleList
        })
        // 提示保存成功
        this.$message.success('加班设置保存成功')
        // 关闭弹窗
        this.$emit('close')
      })
    },
    // 重置表单数据
    resetFormData() {
      this.extraDutyForm = { ...defaultForm }
    }
  }
}
</script>

<style lang="scss" scoped>
.align-center {
  display: flex;
  align-items: center;
}
</style>
